import React, { Component } from 'react'
import { Button } from 'antd'
import './index.css'

export default class Computer extends Component {
  increment = () => {
    const { value } = this.selectNumber
    this.props.increment(value * 1)
  }

  decrement = () => {
    const { value } = this.selectNumber
    this.props.decrement(value * 1)
  }

  incrementOdd = () => {
    const { value } = this.selectNumber
    if (this.props.count % 2 != 0) {
      this.props.increment(value * 1)
    }

  }

  // 异步
  assAsync = () => {
    const { value } = this.selectNumber
    this.props.asyncIncrement(value * 1, 1000)
  }

  render() {
    return (
      <div className='computer'>
        <h2>count result: {this.props.count}</h2>
        <div>
          <select ref={c => this.selectNumber = c} style={{ width: '100px' }}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <Button onClick={this.increment}>+</Button>
          <Button onClick={this.decrement}>-</Button>
          <Button onClick={this.incrementOdd}>increment if odd</Button>
          <Button onClick={this.assAsync}>异步 increment</Button>
        </div>
      </div>
    )
  }
}
